yVideo

Description

The yVideo component serves as a powerful tool primarily designed for displaying a video. It's an adaptable element that allows both static and dynamic content.

Some uses for the yVideo are:

• Autoplay
• Adding text tracks

Basic Structure

In the following the basic structure of the yVideo shall be explained. For the general structure of a yComponent please visit the yBase-components basic-structure.

Title

The header contains the title and description of the video and is displayed while playing and while being paused.

Video

The video itself represents the core element of the component.

Controlbar

The controlbar contains all elements which are connected to an event, like play/pause, a progress bar, the full screen toggle, the skip buttons, the playback rates, the picture in picture control and the submenu.

Properties

Through its various properties the yVideo can be configured to suit your needs. The display below provides you with an overview of all the yVideo properties.

Properties can be changed directly through three methods:

• Inside the Toolbar, which is positioned in your workarea next to your component right where you need it. It shows the most important properties, thus providing a fast and efficient way to configure your component in the most basic way.
• It may also occur in the Toolbar Extension, which is a seamless extension accesible as a dropdown item of the Toolbar. It extends the functionality of the Toolbar by providing advanced pickers for the most used properties.
• Inside the Detail Panel, which is located in the righthand drawer. Every property of a component can be configured here.

Generic

METAread more

Name: componentId

Not Editable

Number Property

--y-video__component-id

The identifier of the component that is unique within a page.

Name: componentType

Not Editable

String Property

--y-video__component-type

The type of the component. For this component it is -video.

Name: name

String Property

--y-video__name

The custom name of the component. It serves for better identification of the component.

Name: version

String Property

--y-video__version

The custom version of the Video-component. This can be used to ensure that all components work well together.

Name: coreTheme

String Property

--y-video__core-theme

The CoreTheme, which will be apllied to the Video. For further information on themes visit the themes page.

Name: subTheme

String Property

--y-video__sub-theme

The subtheme subordinated to the previously specified CoreTheme, which will be apllied to the Video. For further information on themes visit the themes page.

Name: groupTheme

String Property

--y-video__group-theme

The group theme is a further variation of the subtheme which is specified especially for variations of a component inside the subtheme. For further information on themes visit the Theme-Manager page.

DISPLAYread more

Name: display

String Property

--y-video__display

This property specifies the display behavior of the component. This can be be set to:

• none
• block
• flex
• inline

Name: position

Not Editable

String Property

--y-video__position

This property specifies the type of positioning method used for the component. This can be be set to:

• static
• relative
• absolute
• sticky
• fixed

Name: visible

String Property

--y-video__visible

This property can toggle the visibility of the component. The two modes are completely hidden and fully shown.

SIZEread more

Name: minWidth

Injectable

UnitNumber Property

--y-video__min-width

The minimum value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %

Name: minHeight

Injectable

UnitNumber Property

--y-video__min-height

The minimum value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %

Name: width

Injectable

UnitNumber Property

--y-video__width

The value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: height

Injectable

UnitNumber Property

--y-video__height

The value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: maxWidth

Injectable

UnitNumber Property

--y-video__max-width

The maximum value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• none

Name: maxHeight

Injectable

UnitNumber Property

--y-video__max-height

The maximum value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• none

Name: flex

String Property

--y-video__flex

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with the flex display within the same container.

PLACEMENTread more

Name: marginTop

Injectable

UnitNumber Property

--y-video__margin-top

This property creates a space around the component, outside of the top border. This can be set in percent or pixels.

Name: marginRight

Injectable

UnitNumber Property

--y-video__margin-right

This property creates a space around the component, outside of the right border. This can be set in percent or pixels.

Name: marginBottom

Injectable

UnitNumber Property

--y-video__margin-bottom

This property creates a space around the component, outside of the bottom border. This can be set in percent or pixels.

Name: marginLeft

Injectable

UnitNumber Property

--y-video__margin-left

This property creates a space around the component, outside of the left border. This can be set in percent or pixels.

Name: paddingTop

Injectable

UnitNumber Property

--y-video__padding-top

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Name: paddingRight

Injectable

UnitNumber Property

--y-video__padding-right

This property creates a space within the component, inside of the right border. This can be set in percent or pixels.

Name: paddingBottom

Injectable

UnitNumber Property

--y-video__padding-bottom

This property creates a space within the component, inside of the bottom border. This can be set in percent or pixels.

Name: paddingLeft

Injectable

UnitNumber Property

--y-video__padding-left

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Style

BACKGROUNDread more

Name: bgColor

Injectable

Color Property

--y-video__bg-color

--y-video__bg-color__normal

--y-video__bg-color__hover

--y-video__bg-color__focus

--y-video__bg-color__disabled

The color of the background. This can be set as a color from a palette or a custom hex color.

BORDERread more

Name: borderTopColor

Injectable

Color Property

--y-video__border-top-color

--y-video__border-top-color__normal

--y-video__border-top-color__hover

--y-video__border-top-color__focus

--y-video__border-top-color__disabled

The color of the top border. This can be set as a color from a palette or a custom hex color.

Name: borderTopStyle

Injectable

String Property

--y-video__border-top-style

--y-video__border-top-style__normal

--y-video__border-top-style__hover

--y-video__border-top-style__focus

--y-video__border-top-style__disabled

The style of the top border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderTopWidth

Injectable

UnitNumber Property

--y-video__border-top-width

--y-video__border-top-width__normal

--y-video__border-top-width__hover

--y-video__border-top-width__focus

--y-video__border-top-width__disabled

The width of the top border. This can be set in percent or pixels.

Name: borderRightColor

Injectable

Color Property

--y-video__border-right-color

--y-video__border-right-color__normal

--y-video__border-right-color__hover

--y-video__border-right-color__focus

--y-video__border-right-color__disabled

The color of the right border. This can be set as a color from a palette or a custom hex color.

Name: borderRightStyle

Injectable

String Property

--y-video__border-right-style

--y-video__border-right-style__normal

--y-video__border-right-style__hover

--y-video__border-right-style__focus

--y-video__border-right-style__disabled

The style of the right border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderRightWidth

Injectable

UnitNumber Property

--y-video__border-right-width

--y-video__border-right-width__normal

--y-video__border-right-width__hover

--y-video__border-right-width__focus

--y-video__border-right-width__disabled

The width of the right border. This can be set in percent or pixels.

Name: borderBottomColor

Injectable

Color Property

--y-video__border-bottom-color

--y-video__border-bottom-color__normal

--y-video__border-bottom-color__hover

--y-video__border-bottom-color__focus

--y-video__border-bottom-color__disabled

The color of the bottom border. This can be set as a color from a palette or a custom hex color.

Name: borderBottomStyle

Injectable

String Property

--y-video__border-bottom-style

--y-video__border-bottom-style__normal

--y-video__border-bottom-style__hover

--y-video__border-bottom-style__focus

--y-video__border-bottom-style__disabled

The style of the bottom border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderBottomWidth

Injectable

UnitNumber Property

--y-video__border-bottom-width

--y-video__border-bottom-width__normal

--y-video__border-bottom-width__hover

--y-video__border-bottom-width__focus

--y-video__border-bottom-width__disabled

The width of the bottom border. This can be set in percent or pixels.

Name: borderLeftColor

Injectable

Color Property

--y-video__border-left-color

--y-video__border-left-color__normal

--y-video__border-left-color__hover

--y-video__border-left-color__focus

--y-video__border-left-color__disabled

The color of the left border. This can be set as a color from a palette or a custom hex color.

Name: borderLeftStyle

Injectable

String Property

--y-video__border-left-style

--y-video__border-left-style__normal

--y-video__border-left-style__hover

--y-video__border-left-style__focus

--y-video__border-left-style__disabled

The style of the left border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderLeftWidth

Injectable

UnitNumber Property

--y-video__border-left-width

--y-video__border-left-width__normal

--y-video__border-left-width__hover

--y-video__border-left-width__focus

--y-video__border-left-width__disabled

The width of the left border. This can be set in percent or pixels.

Name: borderRadius

Injectable

UnitNumber Property

--y-video__border-radius

The radius of the corners of all the borders. This can be set in percent or pixels.

SHADOWread more

Name: boxShadow

Injectable

String Property

--y-video__box-shadow

--y-video__box-shadow__normal

--y-video__box-shadow__hover

--y-video__box-shadow__focus

--y-video__box-shadow__disabled

The shadow of the component. This is set by the 4 sub-properties x, y, blur and spread of the shadow-property, which can be further read about in the shadow-property section.

OPACITYread more

Name: opacity

Injectable

Number Property

--y-video__opacity

--y-video__opacity__normal

--y-video__opacity__hover

--y-video__opacity__focus

--y-video__opacity__disabled

The opacity of all colored parts of the component. This value is set in percent.

PLAYERBASICSread more

Name: playerBasics__language

String Property

--y-video__player-basics__language

The language which controls the related options for the player.

Name: playerBasics__fontFamily

Injectable

String Property

--y-video__player-basics__font-family

The general font family for text elements.

PLAYERMODEread more

Name: playerMode__audioOnly

Boolean Property

--y-video__player-mode__audio-only

This property control whether it is audio only mode.

Name: playerMode__audioOnlyPoster

Boolean Property

--y-video__player-mode__audio-only-poster

This property control whether it is audio only mode, displaying the thumbnail aswell.

Name: playerMode__autoplay

Boolean Property

--y-video__player-mode__autoplay

The autoplay option enables autoplay to start the video when being loaded.

Name: playerMode__autorepeat

Boolean Property

--y-video__player-mode__autorepeat

This option triggers the video to play in a loop when enabled.

PLAYERSTATEread more

Name: playerState__isPlaying

Not Editable

Boolean Property

--y-video__player-state__is-playing

This property control whether it is audio only mode.

Name: playerState__isFullScreen

Not Editable

Boolean Property

--y-video__player-state__is-full-screen

This property control whether it is audio only mode, displaying the thumbnail aswell.

Name: playerState__isPictureInPicture

Not Editable

Boolean Property

--y-video__player-state__is-picture-in-picture

The autoplay option enables autoplay to start the video when being loaded.

CONTROLBARread more

Name: controlBar__iconSize

Injectable

UnitNumber Property

--y-video__control-bar__icon-size

The icon size controls the actual size of the control elements.

Name: controlBar__iconColor

Injectable

Color Property

--y-video__control-bar__icon-color

The color of the icon inside the control elements.

Name: controlBar__background

Injectable

Color Property

--y-video__control-bar__background

The background color of the control bar.

Name: controlBar__buttonColor

Injectable

Color Property

--y-video__control-bar__button-color

The background color of the single control elements.

CONTROLOPTIONSread more

Name: controlOptions__fullScreenToggle

Boolean Property

--y-video__control-options__full-screen-toggle

This property controls, whether the button to toggle full screen mode will be displayed or not.

Name: controlOptions__playbackRates

String Property

--y-video__control-options__playback-rates

The csv string passes the possible playback rates to the player.

Name: controlOptions__skipSeconds

String Property

--y-video__control-options__skip-seconds

The property to select the time to skip backward and forward with the skip button.

Name: controlOptions__textTrack

Track Property

--y-video__control-options__text-track

A list of tracks to passe as subtitles or commentaries.

VIDEOread more

Name: video__source

String Property

--y-video__video__source

The actual source of the video.

Name: video__type

String Property

--y-video__video__type

The type of the video which should be played.

Name: video__poster

String Property

--y-video__video__poster

The so called thumbnail of the video.

VIDEOTITLEread more

Name: videoTitle__text

String Property

--y-video__video-title__text

The text which is displayed as the title.

Name: videoTitle__fontSize

Injectable

UnitNumber Property

--y-video__video-title__font-size

The font size which applys to the title.

Name: videoTitle__fontColor

Injectable

Color Property

--y-video__video-title__font-color

The font color which applys to both the title and the description.

Name: description__text

String Property

--y-video__description__text

The text which is displayed as the description.

Name: description__fontSize

Injectable

UnitNumber Property

--y-video__description__font-size

The font size which applys to the description.

Video

STATEread more

Name: disabled

Boolean Property

--y-video__disabled

This property can disable or enable the disabled-state of the Video-component.

Links

VIDEOread more

Name: sourceVideo

String Property

--y-video__source-video

This property defines a link to another component by specifying the componentId or componentName, Page, Component, ID, Event. The data from the link will represent the source of the video.

Events

LIFECYCLEread more

Name: EvtInit

String Property

--y-video__-evt-init

This specifies the function to be called, when the Video is initialized.

INPUTread more

Name: EvtPlay

String Property

--y-video__-evt-play

The event that is triggered once the video gets played.

Name: EvtPause

String Property

--y-video__-evt-pause

The event that is triggered once the video is paused.

Usage

In this section you will find a collection of application scenarios and examples that illustrate how to leverage the yVideo in ways that deviate from its standard behavior, as defined by yBase. This section aims to inspire and guide you through various possibilities, helping you to implement more complex or unique functionalities tailored to your specific needs. General properties that are universally applicable can be found in the yBase usage section.

Autoplay

Being eager to start a video when opening a page, autoplay enables to do this without the need of coding.

How to:

1. Open the Detail Panel and navigate to the Style tab to open the PlayerMode section.
2. Now toggle the playerMode__autoplay to true to enable autoplay.

Adding Text Tracks

You can customize the availlable text-tracks of your video by yourself.

How to:

1. Open the Detail Panel and navigate to the Style tab to open the Video section.
2. Open the Tracklist Picker by clicking on video__textTrack.
3. This provides an overview of the existing options. Now create a new entry!
4. Then you proceed to set kind to subtitle for creating a new subtitle. Change label to German and value to de.
5. Now continue by setting src to an url which contains the subtitles as a resource.

Customizing the Controlbar

The actual controlbar can be customized by the user itself. E.g. the buttons can be styled.

Custom Controlbar

Custom Controlbar

genericarrow_forward_iossizearrow_forward_iosminWidth800px

genericarrow_forward_iossizearrow_forward_iosminHeight500px

stylearrow_forward_iosborderarrow_forward_iosborderRadius8px

stylearrow_forward_ioscontrolBararrow_forward_ioscontrolBar__background#44ddbb

stylearrow_forward_ioscontrolBararrow_forward_ioscontrolBar__iconColor#ffffff

Thumbnail

As a developer, you can provide an Thumbnail for your video which gets displayed before playing the video itself.

How to:

1. Open the Detail Panel and navigate to the Style tab to open the PlayerMode section.
2. Now provide the video\_\_poster by entering an url for an image resource.